<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
	<style>
	html{
		height: 100%;
	}
		body{
			height: 100%;
		}
		svg{
			margin:20px auto;
			display: block;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<svg width="100%" height="100%" class="svg">
		<rect x="20" y="20" width="20" height="20" rx="4" ry="4" style="fill:steelblue;stroke:blue;stroke-width:2;opacity:.5" />
		<circle cx="90" cy="20" r="20" style="fill:yellow;stroke:skyblue;stroke-width:1" />
		<line x1="150" y1="20" x2="380" y2="30" style="stroke: black;stroke-width:2" />
		<ellipse cx="100" cy="60" rx="30" ry="20" style="fill:skyblue;stroke-width:2;stroke: red"/>
		<polygon points="220,100 300,210 170,250" style="fill: skyblue;stroke-width:1">
		<defs>
			<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
			<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
			</linearGradient>
		</defs>
		<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>

	</svg>
		

	<script src="js/d3.min.js"></script>
	<script>
		
	</script>
</body>
</html>